<template>
	<view class="container rent-seed">
		<!-- <view class="seed-top">
			<view class="top-list" :class="selTop===idx&&'top-list-active'" v-for="(item,idx) in topList"
				@click="selTop=idx">{{item.title}}</view>
		</view> -->
		<view class="seed-main">
			<view class="page-list" v-for="(item,idx) in pageList" :key="item.id" @click="showDetail(item)">
				<image class="list-bg" :src="$resFileUrl+item.germplasmImg" mode="aspectFill"></image>
				<view class="list-content">
					<view class="list-title">
						<text class="title-words">{{item.germplasmName}}</text>
						<!-- <text class="c-danger seed-price-unit">￥</text>
						<text class="c-danger seed-price">100.00</text> -->
					</view>
					<view class="list-info">预估产量:{{item.productAmount}}</view>
					<view class="list-info">最小种植面积:{{item.seedArea}}</view>
				</view>
			</view>
			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="pageList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
			<view class="not-more" v-else-if="notMore">没有更多了...</view>
		</view>
		<view class="detail-panel" :class="showDetailType&&'detail-panel-show'" @click="showDetailType=false">
			<view class="detail-box">
				<view class="detail-list-bgbox">
					<image class="detail-list-bg" :src="$resFileUrl+showDetailInfo.germplasmImg" mode="aspectFit">
					</image>
				</view>

				<view class="detail-content">
					<view class="detail-title">种子简介</view>
					<view class="detail-listbox">
						<view class="detail-list">
							<view class="detail-list-title">种子名称</view>
							<view class="detail-list-info">{{showDetailInfo.germplasmName}}</view>
						</view>
						<view class="detail-list">
							<view class="detail-list-title">预估产量</view>
							<view class="detail-list-info">{{showDetailInfo.productAmount}}</view>
						</view>
						<view class="detail-list">
							<view class="detail-list-title">播种季节</view>
							<view class="detail-list-info">{{showDetailInfo.seedtime}}</view>
						</view>
						<view class="detail-list">
							<view class="detail-list-title">生长周期</view>
							<view class="detail-list-info">{{showDetailInfo.growthCycle}}</view>
						</view>
						<view class="detail-list">
							<view class="detail-list-title">播种面积</view>
							<view class="detail-list-info">{{showDetailInfo.seedArea}}</view>
						</view>
						<view class="detail-list">
							<view class="detail-list-title">采摘周期</view>
							<view class="detail-list-info">{{showDetailInfo.pickCycle}}</view>
						</view>
						<view class="detail-list">
							<view class="detail-list-title">种子介绍</view>
							<view class="detail-list-info">{{showDetailInfo.remark}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import { hideLoading, showLoading } from '../../common/util';
	import api from '../../common/api';
	const isLoading = ref(false)
	const topList = reactive([
		{ title: '综合排序' },
		{ title: '热度最高' },
		{ title: '种植最高' },
		{ title: '当前季节' },
	])
	const selTop = ref(0)
	const showDetailType = ref(false)
	const pageList = ref<any[]>([])
	const notMore = ref(true)
	onMounted(async () => {
		getPageList()
	})
	const pageSize = 10
	const pageNum = ref(1)
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const res = await api.getSeedList({
				pageNum: pageNum.value,
				pageSize
			})
			if (res.rows.length < pageSize) notMore.value = true
			pageList.value = pageList.value.concat(res.rows)
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum.value = pageNum.value + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum.value = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
	})
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	const showDetailInfo = ref<any>({})
	const showDetail = (item) => {
		showDetailInfo.value = item
		showDetailType.value = true
	}
</script>

<style lang="scss">
	.rent-seed {
		.seed-top {
			background-color: #fff;
		}

		.top-list {
			width: 25%;
			display: inline-block;
			border-bottom: solid 6rpx #fff;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
			color: #5B5B5B;
		}

		.top-list-active {
			font-weight: bold;
			color: #17CC77;
			border-bottom: solid 6rpx #17CC77;
		}

		.seed-main {
			padding: 30rpx;
		}

		.page-list {
			background-color: #fff;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
		}

		.list-bg {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
		}

		.list-content {
			flex-grow: 1;
			margin-left: 30rpx;
		}

		.list-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.title-words {
			font-size: 34rpx;
			color: #232323;
			flex-grow: 1;
		}

		.seed-price-unit {
			font-size: 24rpx;
		}

		.seed-price {
			font-size: 30rpx;
		}

		.list-info {
			font-size: 28rpx;
			color: #8F8F8F;
			margin-top: 10rpx;
		}


		.detail-panel {
			width: 100%;
			height: 100%;
			position: fixed;
			left: -9999px;
			top: 0;
			background-color: rgba(0, 0, 0, 0.3);
		}

		.detail-panel-show {
			left: 0;

			.detail-box {
				bottom: 0;
			}
		}

		.detail-box {
			background-color: #F9F9F9;
			border-radius: 14rpx 14rpx 0 0;
			position: absolute;
			left: 0;
			bottom: -100%;
			width: 100%;
			transition: all 0.3s;

		}

		.detail-list-bgbox {
			padding: 30rpx;
		}

		.detail-list-bg {
			width: 100%;
			display: block;
		}

		.detail-content {
			background-color: #fff;
			padding: 30rpx;
			padding-bottom: 100rpx;
		}

		.detail-listbox {}

		.detail-list {
			width: 50%;
			display: inline-flex;
			margin-top: 30rpx;
		}

		.detail-list-title {
			font-size: 28rpx;
			color: #5B5B5B;
		}

		.detail-list-info {
			font-size: 28rpx;
			color: #232323;
			margin-left: 20rpx;
		}

		.detail-title {
			font-size: 34rpx;
			color: #232323;
			font-weight: bold;
			border-bottom: solid 1px #eee;
			padding-bottom: 20rpx;
		}
	}
</style>